<!-- 开户行新增编辑模态框 -->
<template>
  <el-dialog
    title="选择银行"
    :visible.sync="show"
    append-to-body
    width="80%"
    @close="$emit('update:visible', false)"
    class="bankBranchModal"
  >
    <el-form :inline="true" :model="form" ref="searchForm">
      <el-form-item label="所属银行：">
        <el-select v-model="form.bankId" filterable placeholder="请选择所属银行">
          <el-option label="全部" value></el-option>
          <el-option
            v-for="item in bankIdOptions"
            :key="item.bankCode"
            :label="item.bankName"
            :value="item.bankCode"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="省(市/县)：">
        <div style="display:flex">
          <el-select
            v-model="form.provinceId"
            style="width:100px;margin-right:10px"
            @change="loadCity"
            placeholder="省"
          >
            <el-option label="全部" value></el-option>
            <el-option
              v-for="item in provinceOptions"
              :key="item.provinceid"
              :label="item.province"
              :value="item.provinceid"
            ></el-option>
          </el-select>
          <el-select v-model="form.cityId" placeholder="市/县" style="width:100px">
            <el-option label="全部" value></el-option>
            <el-option
              v-for="item in cityOptions"
              :key="item.cityId"
              :label="item.city"
              :value="item.cityId"
            ></el-option>
          </el-select>
        </div>
      </el-form-item>
      <el-form-item label="联行号：">
        <el-input v-model="form.linkNumber" placeholder="请输入联行号"></el-input>
      </el-form-item>
      <el-form-item label="支行名称：">
        <el-input v-model="form.bankBranchName" placeholder="请输入支行名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchList" id="monitorEnter">查询</el-button>
        <el-button plain @click="resetFields">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border stripe style="margin:20px 0;" @row-click="getCompanyItem">
      <el-table-column label="序号" type="index" align="center" width="55"></el-table-column>
      <el-table-column label align="center" width="55">
        <template slot-scope="scope">
          <el-radio class="radio" v-model="selectradio" :label="scope.$index">&nbsp;</el-radio>
        </template>
      </el-table-column>
      <el-table-column label="联行号" prop="linkNumber" align="center"></el-table-column>
      <el-table-column label="支行名称" prop="bankBranchName" align="center" :width="350"></el-table-column>
      <el-table-column label="所属银行" prop="bankName" align="center"></el-table-column>
      <el-table-column label="地区代码信息" prop="openCode" align="center" :width="120"></el-table-column>
      <el-table-column label="省" prop="provinceName" align="center"></el-table-column>
      <el-table-column label="市/县" prop="cityName" align="center"></el-table-column>
    </el-table>
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
      style="margin-top:30px"
      :current-page.sync="pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :total="totalSize"
    ></el-pagination>
    <template slot="footer">
      <el-button @click="show = false">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </template>
  </el-dialog>
</template>
<script>
import api from "@/api/apiPath";
export default {
  data() {
    return {
      form: {
        bankId: "",
        provinceId: "",
        cityId: "",
        linkNumber: "",
        bankBranchName: ""
      },
      bankIdOptions: [],
      provinceIdOptions: [],
      cityIdOptions: [],
      tableData: [],
      pageNum: 1,
      pageSize: 10, //每页几条
      totalSize: 0,
      seleteRow: {},
      selectradio: "",

      show: false,
      provinceOptions: [],
      cityOptions: []
    };
  },
  props: ["visible"],
  watch: {
    visible(o, n) {
      if (o) {
        this.show = true;
      } else {
        this.show = false;
      }
    }
  },
  computed: {},
  methods: {
    resetFields() {
      this.form = {
        bankId: "",
        provinceId: "",
        cityId: "",
        linkNumber: "",
        bankBranchName: ""
      };
    },
    getCompanyItem(row) {
      this.selectradio = this.tableData.indexOf(row);
      this.seleteRow = row;
    },
    save() {
      this.show = false;
      this.$emit("onSave", this.seleteRow);
    },

    handleClick() {},

    searchList() {
      let param = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ...this.form
      };
      this.axios.post(api.GETBANKBRANCH, param).then(res => {
        if (res.data.code == 200) {
          let lists = res.data.data.list || [];
          this.tableData = lists.map(list => {
            return (list = {
              ...list,
              ...this.info
            });
          });
          this.totalSize = res.data.data.total;
        }
      });
    },
    handleCurrentChange() {
      this.searchList();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.searchList();
    },
    //获取省
    loadprovinces() {
      this.axios.get(api.GETPROVINCES).then(res => {
        if (res.data.code == 200) {
          this.provinceOptions = res.data.data;
        }
      });
    },
    loadBankAll() {
      let bankAll = sessionStorage.getItem("bankAll");
      if (bankAll) {
        this.bankIdOptions = JSON.parse(bankAll);
      } else {
        let params = {
          bankName: ""
        };
        this.axios.post(api.GETBANKALL, params).then(res => {
          if (res.data.code == 200) {
            let bankAllList = res.data.data;
            window.sessionStorage.bankAll = JSON.stringify(bankAllList);
          }
        });
      }
    },
    //获取市
    loadCity(provinceId) {
      if (!provinceId) return;
      this.$set(this.form, "cityId", "");
      this.axios.get(`${api.GETCITY}/${provinceId}`).then(res => {
        if (res.data.code == 200) {
          this.cityOptions = res.data.data.cityList;
        }
      });
    }
  },
  created() {
    this.searchList();
    this.loadprovinces();
    this.loadBankAll();
  },
  destroyed() {},
  filters: {}
};
</script>

<style lang="stylus">
.bankBranchModal {
  .el-form--inline.el-form-item__content {
    width: 60%;
  }
}
</style>
